<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>注册组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 3. 在Vue实例的作用范围内 使用组件 -->
      <my-cpn></my-cpn>
    </div>
    <script>
      // 注册组件步骤
      // 1 Vue.extend()方法 构建组件构造器
      const myComponent = Vue.extend({
        template: `
          <div>
            <h2>我是标题</h2>
            <p>我是内容,哈哈哈</p>
            <p>我是内容,呵呵呵呵</p>       
          </div>   
          `,
      });
      // 2. 调用Vue.component()方法 注册组件,并定义组件标签的名称
      // 全局组件
      // Vue.component("my-cpn", myComponent);
      //创建Vue实例,得到 ViewModel
      var app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        // 局部组件
        components: {
          "my-cpn": myComponent,
        },
      });
    </script>
  </body>
</html>
